<!DOCTYPE html>
<html lang="en">

    <head>
        <title>My BCIT Project</title>
        <meta name="comp2800 template" content="My 2800 App">

        <!------------------------>
        <!-- Required meta tags -->
        <!------------------------>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!------------------------------------------>
        <!-- Bootstrap Library CSS JS CDN go here -->
        <!------------------------------------------>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

        <!-------------------------------------------------------->
        <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
        <!-------------------------------------------------------->
        <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>


        <!-------------------------------------------->
        <!-- Other libraries and styles of your own -->
        <!-------------------------------------------->
        <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
        <!-- <link rel="stylesheet" href="./styles/style.css"> -->


    </head>
    
    <body>
        <!------------------------------>
        <!-- Your HTML Layout go here -->
        <!------------------------------>

        <!-- our own navbar goes here -->
        <nav id="navbarPlaceholder"></nav>

        <!-- the body of your page goes here -->
        <div class="container text-center">
            <h1 class="mb-4">Welcome to our Protecting the marine environment App!</h1>
            <h2 class="mb-4">Guarding the Blue - Protecting the Marine Environment, Starting from You and Me</h2>
            
            <div class="row">
                <div class="col">
                    <img src="./images/jieshao.jpg" alt="">
                </div>
                <div class="col">
                    <h3>Website Mission</h3>
                    <p>Guarding Blue is committed to spreading ocean conservation knowledge, advocating environmental actions, and promoting global ocean health through education, action, and cooperation. We believe that the ocean is the source of life on Earth, and protecting the ocean is not only for the survival of marine organisms, but also for the future of humanity. Our mission is to:
                        <p>1. Educate the public: Through scientific knowledge and vivid cases, let more people understand the importance of the ocean and the threats it faces.</p>
                        <p>2. Advocacy action: Encourage individuals and communities to take concrete actions to reduce negative impacts on the ocean.</p>
                        <p>3. Promote cooperation: Collaborate with governments, businesses, schools, and non-profit organizations to jointly develop and implement marine conservation plans.</p>
                        <p>4. Support scientific research: By supporting marine scientific research, provide scientific basis for policy-making and conservation actions.</p>
                        <p>We hope to restore vitality to the ocean through these efforts and leave a healthy blue planet for future generations.</p>
                    </p>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col">
                    <h3>Team background and objectives</h3>
                    <p>
                        We are a group of environmentalists who love the ocean and come from different professional backgrounds, including marine biology, environmental science, education, and communication studies. The team members include:
                        <p>1. Marine biologists: study marine ecosystems and endangered species to provide scientific support for conservation actions.</p>
                        <p>2. Environmental activists: Plan and organize activities such as beach cleaning and ocean conservation promotion.</p>
                        <p>3. Educators: Design and implement marine conservation education programs for schools and communities.</p>
                        <p>4. Communication experts: Spread ocean conservation concepts through social media, documentaries, and articles.</p>
                        <h4>Our goal is to:</h4>
                        <p>1. Raise awareness: Make more people aware of the urgency of ocean conservation and stimulate public awareness of environmental protection.</p>
                        <p>2. Promote action: Reduce plastic pollution, protect marine biodiversity, and address climate change through practical actions.</p>
                        <p>3. Establish a network: Establish a collaborative network with global marine conservation organizations and individuals to create greater influence.</p>
                        <p>4. Achieving sustainable development: promoting the sustainable use of marine resources and ensuring the long-term health of marine ecosystems.</p>
                        <p>We believe that everyone can contribute to ocean conservation. Whether it's reducing plastic use, participating in beach cleaning, or supporting ocean conservation projects, every action is crucial. Join us and protect the azure together!</p>
                    </p>
                </div>
                <div class="col">
                    <img src="./images/jieshao2.jpg" class="img-thumbnail" alt="...">
                    <img src="./images/jieshao3.jpg" class="img-thumbnail" alt="...">
                    <img src="./images/jieshao4.jpg" class="img-thumbnail" alt="...">
                </div>
            </div>

            <nav id="navbarPlaceholder"></nav>

    <!-- the body of your page goes here -->
    <div class="container my-5">
        <div class="p-5 text-center bg-body-tertiary rounded-3">
         
          <h1 class="text-body-emphasis">Hello, <span id="name-goes-here">my friend</span>!  you have successfully participated in the activities of the marine protection of the environment: </h1>
          <h2> <span id="coffee-count-goes-here">0</span> </h2>
          <p class="col-lg-8 mx-auto fs-5 text-muted">
            Protecting the environment is everyone's responsibility.          </p>
          <div class="d-inline-flex gap-2 mb-5">
            <button id="addCupButton" class="d-inline-flex align-items-center btn btn-primary btn-lg px-4 rounded-pill btn btn-primary" type="button">
                Click the button to cheer and assist us
              
            </button>
          </div>
        </div>
      </div>
        

        <!-- our own footer goes here-->
        <nav id="footerPlaceholder"></nav>

        <!---------------------------------------------->
        <!-- Your own JavaScript functions go here    -->
        <!---------------------------------------------->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
        <script src="./scripts/skeleton.js"></script>
        <script src="./scripts/script.js"></script>
        <script src="./scripts/main.js"></script>
        <script src="./scripts/index.js"></script>
        <!-- <script src="./scripts/script.js"></script> -->

    </body>
    
</html>
